<template>
  <div class="bar-chart-03 chart" ref="barChart03"></div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
const barChart03 = ref(null);
const echarts = inject('$echarts');

let yjzyData = [
  {
    label: '胜浦街道',
    num: 6,
  },
  {
    label: '娄葑街道',
    num: 5,
  },
  {
    label: '斜塘街道',
    num: 6,
  },
  {
    label: '唯亭街道',
    num: 4,
  },
  {
    label: '金鸡湖街道',
    num: 7,
  },
];
let yData = yjzyData.map((item) => item.label); // y轴数据
let xData = yjzyData.map((item) => item.num); // 数量
const option = {
  compCode: 'C202312010',
  backgroundColor: '#003366',
  tooltip: {
    trigger: 'item',
    //       position: function (point, params, dom, rect, size) {
    //         // 固定在顶部
    //         return [point[0], '50%'];
    //       },
    //       formatter: (params) => {
    //         return `
    //   <div style="font-size:12px;color:rgba(0,0,0,0.85);margin-bottom:10px;font-family:Source Han Sans CN-Medium;font-weight: 500;margin-bottom:23px">${params.name}</div>
    //   <div style="font-size: 12px;font-family: Source Han Sans CN-Normal;font-weight: 400;color: rgba(0,0,0,0.65);">当前预警<span style="font-size: 16px;font-family: Source Han Sans CN-Bold;font-weight: bold;color: #397EF0;;margin:2px">${params.value}</span>人次</div>
    // 	`;
    //       },
    //       extraCssText:
    //         'background-color:rgba(255, 255, 255, 0.8);padding:12px;box-shadow: 0px 3px 12px 1px rgba(57,126,240,0.22);border-radius: 4px;filter: blur(undefinedpx);border:none;',
  },
  grid: {
    left: '0',
    right: '20',
    bottom: '10', // 下边距,
    top: '10',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      // 坐标轴字体颜色
      textStyle: {
        color: ' #fdfdfd',
        fontSize: '24',
      },
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      // y轴刻度线
      show: false,
    },
    splitLine: {
      // 网格
      show: false,
      lineStyle: {
        color: '#fdfdfd',
        type: 'dashed',
      },
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(227, 237, 255, 0.05)', 'rgba(227, 237, 255, 0)'],
      },
    },
  },
  yAxis: {
    type: 'category',
    inverse: true,
    axisLabel: {
      // 坐标轴字体颜色
      textStyle: {
        color: '#fdfdfd',
        fontSize: '24',
      },
    },
    axisLine: {
      show: false,
      lineStyle: {
        show: false,
      },
    },
    axisTick: {
      // y轴刻度线
      show: false,
    },
    splitLine: {
      // 网格
      show: false,
    },
    data: yData,
  },
  series: [
    {
      type: 'bar',
      barWidth: '16px', // 柱子宽度
      color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
        // 渐变色
        {
          offset: 1,
          color: '#1f91f3 ',
        },
        {
          offset: 0,
          color: '#15d0ff',
        },
      ]),
      itemStyle: {
        barBorderRadius: [2, 2, 0, 0],
      },
      data: xData,
    },
  ],
};


onMounted(() => {
  const chart = echarts.init(barChart03.value);
  chart.setOption(option);
});

</script>

<style scoped></style>
